<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        video{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            z-index: -99;
        }
        .nav{
            width: 100%;
            height: 70px;
            background-color: rgba(0,0,0,0.4);
            line-height: 70px;
            overflow: hidden;
        }
        .center{
            width: 1200px;
            height: 70px;
            margin: 0 auto;
        }
        .left span{
            font-size: 20px;
            color: #fff;
        }
        .left{
            float: left;
        }
        .lis{
            float: left;
            width: 500px;
            margin-left: 150px;
            height: 70px;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 40px;
            color: #ccc;
            padding: 0 10px;
        }
        .active{
            background-color: rgba(0,0,0,0.8);
        }
        .right{
            float: right;
            height: 70px;
        }
        img{
            width: 25px;
            /* float: left; */
            vertical-align: middle;
        }
        .right span{
            /* float: left; */
            color: #fff;
        }
        input{
            width: 200px;
            height: 35px;
            outline: none;
            border: none;
            padding-left: 10px;
        }
        button{
            background-color: rgba(202,202,202,0.5);
            padding: 10px;
            border: none;
            color: #fff;
        }
        .content{
            width: 1200px;
            height: 400px;
            margin: 20px auto;
        }
        .content-left{
            width: 400px;
            float: left;
            height: 400px;
            background-color:rgba(255,255,255,0.3) ;
            border: 1px solid #43B2F9;
            border-radius: 10px;
            overflow: hidden;
            color: #fff;
        }
        .content-right{
            width: 700px;
            height: 400px;
            float: right;
            /* background-color: #ccc; */
        }
        .content-left .top{
            padding: 20px 0;
            color: #fff;
            text-align: center;
            background-color: #43B2F9;
        }
        .content-left .top span{
            font-size: 20px;
        }
        .today{
            /* text-align: center; */
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            /* justify-content: space-between; */
        }
        .text{
            font-size: 40px;
        }
        .today img{
            width: 50px;
            height: 50px;
            /* vertical-align: middle; */
        }
        .list{
            text-align: center;
        }
        .rows{
            padding:20px 30px; 
        }
        .rows .weath{
            float: left;
        }
        .rows .air{
            float: right;
        }
        .wen{
            text-align: center;
            font-size: 20px;
            padding: 20px 30px;
        }
        .windy{
            float: left;
        }
        .power{
            float: right;
        }
        .foot{
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.3);
            text-align: center;
            color: #ccc;
            padding: 25px 0;
        }
    </style>
</head>
<body>
    <!-- autoplay自动播放 -->
    <!--loop无限循环  -->
    <!-- muted静音播放 -->
    <video src="./a0.mp4" autoplay loop muted></video>
    <!-- 导航 -->
    <div class="nav">
        <div class="center">
            <div class="left">
                <span>全球城市天气预报</span>
            </div>
            <div class="lis">
                <ul>
                    <li>首页</li>
                    <li class="active">今日天气</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                </ul>
            </div>
            <div class="right">
                <img src="./adre.png" alt="">
                <span class="title">张家口</span>
                <input type="text" value="张家口">
                <button>查询</button>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="content-left">
            <p class="top">
                <span class="title">张家口</span> 今日天气 [刚刚更新]
            </p>
            <div class="today">
                <span class="text">27</span>℃
                <img src="https://a.hecdn.net/img/common/icon/202106d/100.png" alt="">
            </div>
            <div class="list">
                <span class="min">21</span>℃ ~
                <span class="max">32</span>℃
            </div>
            <div class="rows">
                <p class="weath">天气：<span>晴</span></p>
                <p class="air">空气质量：<span>良</span></p>
            </div>
            <div class="rows">
                <p class="windy">风向：<span>晴</span></p>
                <p class="power">风力等级：<span>2</span>级</p>
            </div>
            <div class="wen">
                <p>温馨提示</p>
                <p class="tishi">天气较好，户外运动请注意防晒，推荐您在室内进行低强度运动。</p>
            </div>
        </div>
        <div class="content-right"  id="main">
            
        </div>
    </div>
    <div class="foot">
       
    </div>
    <script src="ajax.js"></script>
    <script src="echarts.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var inp = document.querySelector("input")
        var btn = document.querySelector("button")
        var text = document.querySelector(".text")
        var img = document.querySelector(".today img")
        var min = document.querySelector(".min")
        var max = document.querySelector(".max")
        var weath = document.querySelector(".weath span")
        var air = document.querySelector(".air span")
        var windy = document.querySelector(".windy span")
        var power = document.querySelector(".power span")
        var tishi = document.querySelector(".tishi")
        var title = document.querySelectorAll(".title")
        option = {
            textStyle:{
                color:"#fff"
            },
            title:{
                text:"未来七天温度变化",
                textStyle:{
                    color:"#fff"
                }
            },
            tooltip:{
                show:true,
                trigger:'axis',
                axisPointer:{
                    type:"cross"
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisTick:{
                    lineStyle:{
                    color:"#fff"
                     }
                },
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                }
                
            },
            yAxis: {
                type: 'value',
                lineStyle:{
                    color:"#fff"
                }

            },
            series: [
                {
                    data: [],
                    type: 'line',
                    areaStyle: {}
                }
            ]
        };
        btn.onclick = function () {
            title[0].innerText = inp.value
            title[1].innerText = inp.value
            ajax({
                method: "get",
                url: "https://geoapi.qweather.com/v2/city/lookup",
                params: {
                    location: inp.value,
                    key: 'c494e264764449f7b4f6bf742276d7f9'
                },
                token: null,
                ContentType: null,
                callBack: function (data) {
                    console.log(JSON.parse(data))
                    var id = JSON.parse(data).location[0].id
                    weather(id)
                    now(id);
                    airs(id)
                    run(id)
                }
            })
        }
        function weather(id) {
            ajax({
                method: "get",
                url: "https://devapi.qweather.com/v7/weather/7d",
                params: {
                    location: id,
                    key: 'c494e264764449f7b4f6bf742276d7f9'
                },
                token: null,
                ContentType: null,
                callBack: function (data) {
                    console.log(JSON.parse(data))
                    var res = JSON.parse(data)
                    min.innerText = res.daily[0].tempMin
                    max.innerText = res.daily[0].tempMax

                    option.xAxis.data = []
                    option.series[0].data=[]
                    for(var i = 0; i < res.daily.length; i++){
                        option.xAxis.data.push(res.daily[i].fxDate.substr(5,5))
                        option.series[0].data.push((Number(res.daily[i].tempMax)+Number(res.daily[i].tempMin))/2)
                    }
                    myChart.setOption(option);
                }
            })
        }
        function now(id){
            ajax({
                method: "get",
                url: "https://devapi.qweather.com/v7/weather/now",
                params: {
                    location: id,
                    key: 'c494e264764449f7b4f6bf742276d7f9'
                },
                token: null,
                ContentType: null,
                callBack: function (data) {
                    console.log(JSON.parse(data))
                   var res = JSON.parse(data)
                   text.innerText = res.now.temp
                   img.src = "https://a.hecdn.net/img/common/icon/202106d/"+res.now.icon+".png"
                   weath.innerText = res.now.text
                   windy.innerText = res.now.windDir
                   power.innerText = res.now.windSpeed

                }
            })
        }
        function airs(id){
            ajax({
                method: "get",
                url: "https://devapi.qweather.com/v7/air/now",
                params: {
                    location: id,
                    key: 'c494e264764449f7b4f6bf742276d7f9'
                },
                token: null,
                ContentType: null,
                callBack: function (data) {
                    console.log(JSON.parse(data))
                   var res = JSON.parse(data)
                   air.innerText = res.now.category
                  
                }
            })
        }

        function run(id){
            ajax({
                method: "get",
                url: "https://devapi.qweather.com/v7/indices/1d",
                params: {
                    location: id,
                    key: 'c494e264764449f7b4f6bf742276d7f9',
                    type:1
                },
                token: null,
                ContentType: null,
                callBack: function (data) {
                    console.log(JSON.parse(data))
                   var res = JSON.parse(data)
                    tishi.innerText = res.daily[0].text
                    console.log(res.daily[0].text);
                    
                  
                }
            })
        }
        
        btn.onclick()
    </script>
</body>
</html>